<template>
  <div>
    <template v-for="(item, index) in dataForm[attrName]">
      <div :key="index" style="display: flex;position: relative; margin-top: 5px;">

        <el-cascader v-model="item[listName]" :filterable="true" :clearable="true"
                     :placeholder="listPlaceholder" style="margin-right: 5px;"
                     :options="list" :props="{ expandTrigger: 'hover' }" @input="forceUpdate">
        </el-cascader>

        <el-input-number v-model="item[numberName]" :step="1" :placeholder="numberPlaceholder"
                         type="number"
                         @input="forceUpdate"></el-input-number>
        <el-tooltip class="item" effect="dark" content="新增"
                    placement="bottom">
          <a class="el-icon-circle-plus-outline" @click="addOneLine(index+1)"
             style="position: absolute;right: -17px; top: 10px;"></a>
        </el-tooltip>
        <el-tooltip v-if="dataForm[attrName].length > 1" class="item" effect="dark" content="删除" placement="bottom">
          <a class="el-icon-remove-outline" @click="deleteOneLine(index)"
             style="position: absolute;right: -35px; top: 10px;"></a>
        </el-tooltip>
      </div>
    </template>
  </div>
</template>

<script>
import basicMixins from './basicMixins'

export default {
  name: 'normalCascaderAndNumber',
  mixins: [basicMixins],
  data() {
    return {}
  },
  props: {
    list: {
      type: Array,
      required: true,
      default: () => []
    },
    listPlaceholder: {
      type: String,
      default: ''
    },
    listName: {
      type: String,
      default: 'key'
    },
    numberName: {
      type: String,
      default: 'value'
    },
    numberPlaceholder: {
      type: String,
      default: ''
    }
  },
  methods: {
    addOneLine(index) {
      const item = {}

      item[this.listName] = []
      item[this.numberName] = 0
      this.dataForm[this.attrName].splice(index, 0, item)
    },
    deleteOneLine(index) {
      this.dataForm[this.attrName].splice(index, 1)
    }
  },
  created() {
    this.dataForm[this.attrName] = []
    this.addOneLine(0)
  }
}
</script>

<style scoped>
</style>
